'use strick'
import React, { useState, useEffect } from "react";
import axios from "axios";
import Cookies from 'js-cookie';
import { AppPopupModal, AppPopupRemove } from "../layout/popup";
import { useHistory } from "react-router-dom";
const urlPrefix = 'https://wx.gxfishing.com/';

/* 处理数据 */
function getdata(setclassData){
  const imgPrefix = 'http://bird.gxfishing.com/';
  axios({
    method:'POST',
    url: urlPrefix + 'common/listAttendClass',
    headers:{
      'Access-Control-Allow-Origin':'*',
    }
  })
  .then(res => {
    // console.log(res);
    if(res.status == 200 && res.data.code == 0){
      let data = res.data.data;
      let teamlist = [];
      for( let i of data){
        if(teamlist.indexOf(i.teamName) >= 0){

        }else{
          teamlist.push(i.teamName);
        }
      }
      let result = [];
      for(let i of teamlist){
        let tmp = {
          classType: i,
          classes:[],
        }
        result.push(tmp);
      }
      for(let i of data){
        let tmp = {
          pic: imgPrefix + i.img,
          name: i.name,
          id: i.id,
        }
        for( let j of result){
          if(j.classType == i.teamName){
            j.classes.push(tmp);
            break;
          }
        }
      }
      // console.log(result)
      setclassData(result);
    }
  })
  .catch( e => {console.warn(e)})
}

function IndexPage(props) {
  const topHeight = {
    height: "50px"
  };
  let history = useHistory();
  const goto = (name) => {
    history.push("/ClassShow/" + name);
  }
  const [classData, setclassData] = useState([]);
  useEffect(() => {
    getdata(setclassData);
  },[]);

  const list = classData.map((el, index) => {
    const listClass = el.classes.map(el =>
      <div className="item" key={el.name} onClick={()=>{goto(el.id)}}>
        <div className="img-box">
          <img src={el.pic} alt="" />
        </div>
        <div className="goto">进入报名</div>
      </div>
    )
    return (
      <div className="types" key={el.classType}>
        <div className="title">
          <div className="the-text">{el.classType}</div>
          {/* <div className="white-b"></div> */}
        </div>
        <div className="wrap">
          <div className="container">
            {listClass}
          </div>
        </div>
      </div>
    )
  });
  return (
    <div className="index-page">
      <div className="nav-top" style={topHeight}>
        <div className="title">飞鸟寒假班报名</div>
      </div>

      {list}

    </div>
  );
}


export default IndexPage;
